<template>
  <div>
    <div style="display: flex">
      <div style="margin-top: 1%">
      <!-- 13245678 -->
        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handlePeriodAdd"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handlePeriodDelete"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handlePeriodExport"
            >导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="submitPeriodList"
            >提交</el-button>
          </el-col>
        </el-row>

        <el-table
          :ref="table"
          :data="periodList"
          :row-class-name="rowPeriodIndex"
          @selection-change="handlePeriodSelectionChange"
          :stripe="true"
          :border="true"
          :row-key="key"
        >
          <el-table-column type="selection" width="30" align="center" />
          <el-table-column
            label="期间编码"
            align="center"
            prop="code"
            width="80"
            column-key="index"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.code"
                placeholder="输入编码"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="期间名称"
            align="center"
            prop="name"
            width="80"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="输入名称"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="频次"
            align="center"
            prop="frequency"
            width="80"
          >
            <template #default="scope">
              <el-select
                v-model="scope.row.frequency"
                placeholder="请选择频次"
                clearable
                size="small"
              >
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="期间开始日期"
            align="center"
            prop="startDate"
            width="100px"
          >
            <template #default="scope">
              <el-date-picker
                clearable
                v-model="scope.row.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 150px"
                placeholder="请选择开始日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="期间结束日期"
            align="center"
            prop="endDate"
            width="100px"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.endDate"
                placeholder="请选择结束日期"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="预计支付日期"
            align="center"
            prop="expectPaymentDate"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.expectPaymentDate"
                placeholder="请选择预计支付日期"
              />
            </template>
          </el-table-column>
          <el-table-column label="所属年份" align="center" prop="year">
            <template #default="scope">
              <el-input v-model="scope.row.year" placeholder="请选择所属年份" />
            </template>
          </el-table-column>
          <el-table-column label="所属年月" align="center" prop="yearMonth">
            <template #default="scope">
              <el-input
                v-model="scope.row.yearMonth"
                placeholder="请选择所属月份"
              />
            </template>
          </el-table-column>
        </el-table> -->
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   listStructure,
//   getStructure,
//   addStructure,
//   updateStructure,
//   delStructure,
//   logicDeleteMainConfig,
//   updateMainConfigStatus,
// } from "@/api/hr/structure";
// import {
//   listSonstructure,
//   getSonstructure,
//   addSonstructure,
//   updateSonstructure,
//   delSonstructure,
//   logicDeleteSonConfig,
// } from "@/api/hr/sonstructure";
// import {
//   listFrequency,
//   getFrequency,
//   delFrequency,
//   addFrequency,
//   updateFrequency,
// } from "@/api/hr/frequency";
// import {
//   listPeriod,
//   getPeriod,
//   delPeriod,
//   addPeriod,
//   updatePeriod,
// } from "@/api/hr/period";
export default {
  name: "configuration",
  dicts: ["hr_salary_frequency", "hr_frequency_status"],
  data() {
    return {
      configTitle: "薪酬结构配置",
      configForm: {},
      freForm: {},
      // 显示搜索条件
      showSearch: true,
      openConfig: false,
      sonConfigTitle: "子薪酬结构配置",
      freTitle: "",
      sonConfigForm: {},
      openSonConfig: false,
      // 主薪酬配置列表
      configList: [],
      structureId: 0,
      // 薪酬配置子表列表
      sonstructureList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        description: null,
        status: null,
        creator: null,
        updator: null,
        flag: null,
      },
      freQueryParams: {
        pageNum: 1,
        pageSize: 10,
        creator: null,
        code: null,
        type: null,
        status: null,
      },
      // 查询子结构参数
      querySonParams: {
        pageNum: 1,
        pageSize: 30,
        structureId: null,
        name: null,
        description: null,
        amount: null,
        creator: null,
        updator: null,
      },
      // 查询期间参数
      queryPeriodParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        frequency: null,
        startDate: null,
        endDate: null,
        expectPaymentDate: null,
        year: null,
        yearMonth: null,
        flag: null,
        creator: null,
        updator: null,
      },
      total: 0,
      freTotal: 0,
      periodTotal: 0,
      statusList: [
        {
          id: 0,
          name: "启用",
        },
        {
          id: 1,
          name: "停用",
        },
      ],
      typeList: [
        {
          id: 1,
          name: "普通",
        },
        {
          id: 2,
          name: "特殊",
        },
      ],
      freRules: {
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        type: [
          { required: true, message: "请选择频次类型", trigger: "change" },
        ],
      },
      configRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      sonConfigRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
      },
      leftNavigations: [
        {
          id: 1,
          name: "薪酬频次",
          icon: "el-icon-date",
        },
        {
          id: 2,
          name: "薪资期间",
          icon: "el-icon-postcard",
        },
        {
          id: 3,
          name: "薪酬项目",
          icon: "el-icon-menu",
        },
        {
          id: 4,
          name: "五险一金",
          icon: "el-icon-money",
        },
      ],
      // 导航id
      navigationId: 1,
      frequencyList: [],
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      periodLoading: true,
      // 是否显示弹出层
      open: false,
      // 显示搜索条件
      showPeriodSearch: true,
      // 薪酬期间列表
      periodList: [],
      //期间选中数据
      checkedPeriodList: [],
      tableWidth: 0,
    };
  },
  created() {
    // this.getFrequencyList();
    // this.getPeriodList();
    // this.getSalaryConfigList();
    // this.getSonStructureList();
  },
  methods: {
    /** 搜索按钮操作 */
    handlePeriodQuery() {
      this.queryPeriodParams.pageNum = 1;
      this.getPeriodList();
    },
    /** 重置按钮操作 */
    resetPeriodQuery() {
      this.resetForm("queryPeriodForm");
      this.handlePeriodQuery();
    },
    getPeriodList() {
      this.periodLoading = true;
      listPeriod(this.queryPeriodParams).then((response) => {
        this.periodList = response.rows;
        this.periodTotal = response.total;
        this.periodLoading = false;
      });
    },
    /** 复选框选中数据 */
    handlePeriodSelectionChange(selection) {
      this.checkedPeriodList = selection.map((item) => item.index);
    },
    /** 序号 */
    rowPeriodIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 新增按钮操作 */
    handlePeriodAdd() {
      let obj = {};
      var objLength = this.periodList.length;
      obj.key = parseInt(objLength);
      obj.code = "";
      obj.name = "";
      obj.frequency = "";
      obj.startDate = "";
      obj.endDate = "";
      obj.expectPaymentDate = "";
      obj.year = "";
      obj.yearMonth = "";
      this.periodList.push(obj);
    },
    /** 修改按钮操作 */
    handlePeriodUpdate(row) {
      this.resetPeriod();
      const id = row.id || this.periodIds;
      getPeriod(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改薪酬期间";
      });
    },
    submitPeriodList() {},
    // 表单重置
    resetPeriod() {
      this.form = {
        id: null,
        code: null,
        name: null,
        frequency: null,
        startDate: null,
        endDate: null,
        expectPaymentDate: null,
        year: null,
        yearMonth: null,
        flag: null,
        creator: null,
        createTime: null,
        updator: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updatePeriod(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getPeriodList();
            });
          } else {
            addPeriod(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getPeriodList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handlePeriodDelete(row) {
      var that = this;
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const periodList = that.periodList;
          const checkedPeriodList = that.checkedPeriodList;
          this.periodList = periodList.filter(function (item) {
            return checkedPeriodList.indexOf(item.index) == -1;
          });
        })
        .catch(() => {
          //点取消的提示
          return;
        });
    },
    /** 导出按钮操作 */
    handlePeriodExport() {
      this.download(
        "hr/period/export",
        {
          ...this.queryPeriodParams,
        },
        `period_${new Date().getTime()}.xlsx`
      );
    },
    /** 查询薪酬频次列表 */
    getFrequencyList() {
      this.loading = true;
      listFrequency(this.queryParams).then((response) => {
        this.frequencyList = response.rows;
        this.freTotal = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    changeNavigationId(navigationId) {
      /*this.$nextTick(()=>{
        this.$refs.table.$forceUpdate()
      })*/
      this.navigationId = navigationId;
      if (navigationId == 2) {
        this.tableWidth = 0;
        this.$nextTick(() => {
          this.$refs.table.$forceUpdate();
        });
      }
    },
    handleFreQuery() {
      this.queryParams.pageNum = 1;
      this.getFrequencyList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 重置按钮操作 */
    resetFreQuery() {
      this.resetForm("freQueryForm");
      this.handleFreQuery();
    },
    // 表单重置
    reset() {
      this.freForm = {
        id: null,
        code: null,
        type: null,
        status: null,
      };
      this.resetForm("freForm");
    },
    /** 提交按钮 */
    submitFreForm() {
      this.$refs["freForm"].validate((valid) => {
        if (valid) {
          if (this.freForm.id != null) {
            updateFrequency(this.freForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getFrequencyList();
            });
          } else {
            addFrequency(this.freForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getFrequencyList();
            });
          }
        }
      });
    },
    /** 新增按钮操作 */
    handleFreAdd() {
      this.reset();
      this.open = true;
      this.freTitle = "添加薪酬频次";
    },
    /** 修改按钮操作 */
    handleFreUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getFrequency(id).then((response) => {
        this.freForm = response.data;
        this.open = true;
        this.freTitle = "修改薪酬频次";
      });
    },
    /** 删除按钮操作 */
    handleFreDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除薪酬频次编号为"' + ids + '"的数据项？')
        .then(function () {
          return delFrequency(ids);
        })
        .then(() => {
          this.getFrequencyList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "hr/frequency/export",
        {
          ...this.queryParams,
        },
        `frequency_${new Date().getTime()}.xlsx`
      );
    },
    getSalaryConfigList() {
      listStructure(this.queryParams).then((response) => {
        this.configList = response.rows;
        this.total = response.total;
      });
    },
    addConfig() {
      this.openConfig = true;
      this.configTitle = "薪酬结构配置";
      this.resetConfig();
    },
    cancelConfig() {
      this.openConfig = false;
      this.resetConfig();
    },
    resetConfig() {
      this.configForm = {
        name: null,
        description: null,
        status: null,
      };
      this.resetForm("configForm");
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    handelUpdateMainConfig(configId) {
      getStructure(configId).then((response) => {
        this.configForm = response.data;
        if (this.configForm.status == "0") {
          this.configForm.status = "启用";
        } else {
          this.configForm.status = "停用";
        }
        this.openConfig = true;
        this.configTitle = "修改薪酬结构配置";
      });
    },
    logicDeleteMainConfig(configId) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          logicDeleteMainConfig(configId).then((response) => {
            this.getSalaryConfigList();
          });
        })
        .catch(() => {
          //点取消的提示
          return;
        });
    },
    updateMainConfigStatus(id, status) {
      let newStatus = status == "0" ? "1" : "0";
      let data = {
        id: id,
        status: newStatus,
      };
      updateMainConfigStatus(data).then((response) => {
        let headmsg = status == "0" ? "停用" : "启用";
        this.$modal.msgSuccess(headmsg + "成功");
        this.getSalaryConfigList();
      });
    },
    submitConfigForm() {
      this.$refs["configForm"].validate((valid) => {
        if (valid) {
          console.log("this.configForm", this.configForm);
          if (this.configForm.id != null) {
            updateStructure(this.configForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openConfig = false;
              this.getSalaryConfigList();
            });
          } else {
            addStructure(this.configForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openConfig = false;
              this.getSalaryConfigList();
            });
          }
        }
      });
    },
    /** 查询薪酬结构配置子列表 */
    getSonStructureList() {
      listSonstructure(this.querySonParams).then((response) => {
        this.sonstructureList = response.rows;
      });
    },
    addSonConfig(id) {
      this.openSonConfig = true;
      this.sonConfigTitle = "子薪酬结构配置";
      this.structureId = id;
      this.resetSonConfig();
    },
    submitSonConfigForm() {
      this.$refs["sonConfigForm"].validate((valid) => {
        if (valid) {
          this.sonConfigForm.structureId = this.structureId;
          if (this.sonConfigForm.id != null) {
            updateSonstructure(this.sonConfigForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openSonConfig = false;
              this.getSonStructureList();
            });
          } else {
            addSonstructure(this.sonConfigForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openSonConfig = false;
              this.getSonStructureList();
            });
          }
        }
      });
    },
    resetSonConfig() {
      this.sonConfigForm = {
        name: null,
        description: null,
        type: null,
      };
      this.resetForm("sonConfigForm");
    },
    cancelSonConfig() {
      this.openSonConfig = false;
      this.resetSonConfig();
    },
    handelUpdateSonConfig(configId, structureId) {
      getSonstructure(configId).then((response) => {
        this.sonConfigForm = response.data;
        this.openSonConfig = true;
        this.structureId = structureId;
        this.sonConfigTitle = "修改子薪酬结构配置";
      });
    },
    logicDeleteSonConfig(configId) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          logicDeleteSonConfig(configId).then((response) => {
            this.getSonStructureList();
          });
        })
        .catch(() => {
          //点取消的提示
          return;
        });
    },
  },
};
</script>

<style scoped>
.configbox {
  display: flex;
  background-color: #e6e6e6;
  width: 160%;
  margin-left: 6%;
  margin-top: 2%;
  height: 50px;
  border-radius: 4px;
  text-align: center;
  position: relative;
}
.blocktext {
  color: #0bbd87;
  cursor: pointer;
  margin-left: 10px;
  line-height: 40px;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
  width: 50px;
}
#selectForm >>> .el-input__inner::placeholder {
  font-size: 10px;
}
</style>
